<template>
	<view>
		<scroll-view :scroll-y="modalName==null" class="page" :class="modalName!=null?'show':''">
			<cu-custom bgColor="bg-gradual-pink" :isBack="true">
				<block slot="content">隐患排查</block>
			</cu-custom>
			<view class="hearder" @click="gotodetail"
				v-if="resData.placeDangerId != null && resData.placeDangerId != ''">
				<view class="dl">
					<view class="dt width" v-if="resData.dangerDesc != null && resData.dangerDesc != ''">{{resData.dangerDesc}}</view>
					<view class="dt green">{{resData.flowStatus}}</view>
				</view>
				<view class="dl">
					<view class="dt size">排查时间：{{resData.checkTime}}</view>
					<view class="dt red">{{resData.status == 0 ? '未整改' : '已整改'}}</view>
				</view>
			</view>
			<view class="titlecontent">
				<view class="h6">检查标准 </view>
				<view class="span">{{checkCriteria}} </view>
				<view class="h6">隐患描述<view class="icon" @click="showDrawer" v-if="showSelectBtn">请选择 </view>
				</view>
				<view class="textarea">
					<textarea disabled maxlength="1000" v-model="resData.dangerDesc" placeholder-style="color:#F76260"
						placeholder="请选择隐患描述" />
					<view class="zhuyi">
						隐患描述只可以从隐患库选择，如需新增隐患描述，请联系颜工更新隐患库。如果确实存在需要现场自定义隐患描述，需在隐患库中新增一条"其他隐患"，选中"其他隐患"，就可以编辑隐患描述</view>
				</view>
				<view class="h6">整改建议 </view>
				<view class="textarea">
					<textarea maxlength="1000" v-model="resData.advise" placeholder-style="color:#F76260;height:80px;"
						placeholder="请选择整改建议" />
				</view>
				<view class="h6">详细描述 </view>
				<view class="textarea">
					<textarea style="height: 70px;" v-model="resData.detailDesc"
						placeholder-style="color:#F76260;height:80px;" placeholder="请输入详细描述,可为空" />

				</view>
				<view class="h6">上传隐患图片<!-- <view class="icon xifen">从聊天记录选择 清空图片 </view> -->
					<view class="photo" v-if="showphoto">

						<uni-file-picker v-model="imageValue" fileMediatype="image" mode="grid" @select="select"
							@progress="progress" @delete="deLete" @success="success" @fail="fail" />
					</view>
				</view>
				<view>
					<view class="fontbotm">
						<switch class="section-right" :checked="treatmentStatu.checked" @change="switchChange" />
						<view class="span">无隐患相片</view>
					</view>
				</view>
				<view class="padding flex flex-direction">
					<button v-if="resData.placeDangerId != null && resData.placeDangerId != ''" class="cu-btn bg-red lg"
						@click="onSubmit('edit')">编辑</button>
					<button v-if="resData.placeDangerId == null || resData.placeDangerId == ''"
						class="cu-btn bg-blue lg" @click="onSubmit">提交</button>

				</view>
			</view>
			<!-- 搜索 -->
			<view class="box">
				<uni-drawer ref="showLeft" :width="320" mode="right">
					<!-- <button @click="closeDrawer">关闭Drawer</button> -->
					<view class="formbox">
						<view class="positop">
							<view class="h5">请选择隐患描述</view>
						</view>
						<uni-forms ref="form">
							<view class="ul" v-for="(item,index) in formData" @click="checkdetail(item)">
								<!-- <view class="c1 bootm">深圳市龙岗区捷程职业技术培训学校</view> -->
								<view class="qinse"><view class="span">{{index+1}}.</view> {{item.dangerDesc}}</view>
								<view class="c2 bootm">{{item.rectify}}</view>
							</view>
						</uni-forms>
					</view>
					<!-- 	<view class="uni-btn-v">
						<button type="warn" @click="submit">提交</button>
					</view> -->
				</uni-drawer>
			</view>
		</scroll-view>
	</view>

</template>

<script>
	import server from '@/api/server.js'

	export default {
		components: {

		},
		data() {
			return {
				checkCriteria: '',
				treatmentStatu: {
					checked: false
				},
				resData: {
					dangerDesc: '',
					detailDesc: '',
				},
				imageValue: [],
				myFormData: [],
				photoData: [],
				searchId: '',
				showphoto: true,
				modalName: null,
				formData: [],
				showSelectBtn: true
			}
		},
		onLoad() {
			
		},
		mounted() {
			this.checkCriteria = this.$root.$mp.query.checkCriteria
			this.searchId = this.$root.$mp.query.searchId
			this.getrectifyList()
		},
		methods: {
			gotodetail() {
				uni.navigateTo({
					// ? 后面加要传的参数， 多个参数用 & 隔开 
					url: '/pages/siteinvestigation/dangerdetail?id=' + this.resData.placeDangerId
				})
			},
			//图片
			apiditBatch(index) {
				this.imageValue = []
				let dataphot = this.photoData
				dataphot.forEach(item => {
					this.imageValue.push({
						name: item.id,
						extname: '',
						url: item.url
					})

				})
				console.log(this.imageValue)
			},
			//编辑
			// onEditSubmit(){
			// 	uni.showLoading()
			// 	server.dangeredit(this.resData).then(res => {
			// 			console.log(res)
			// 			if (res.data.code == 200) {
			// 				this.$tip.success('编辑成功!')
			// 				uni.hideLoading();
			// 				uni.navigateBack({
			// 					delta: 1
			// 				});
			// 			} else {
			// 				this.$tip.success('编辑失败!')
			// 				uni.hideToast();
			// 			}
			// 	})
			// },
			//提交//编辑
			onSubmit(num) {
				let photoList = []
				this.myFormData.forEach(function(item,index) {
					photoList.push(item)
				})
				this.resData.photoList = photoList
				this.resData.placeCheckId = this.$root.$mp.query.checkId
				//显示加载框
				uni.showLoading({
					title: '加载中'
				});
			
				if(num == 'edit'){
					this.resData.id = this.resData.placeDangerId
					server.dangeredit(this.resData).then(res => {
						this.$nextTick(function() {
							console.log(res)
							if (res.data.code == 200) {
								this.$tip.success('编辑成功!')
								uni.navigateBack(1)
							} else {
								this.$tip.success('编辑失败!')
								uni.hideToast();
							}
						});
					
					})
				}else{
					server.dangeradd(this.resData).then(res => {
						this.$nextTick(function() {
							console.log(res)
							if (res.data.code == 200) {
								this.$tip.success('提交成功!')
								uni.navigateBack(1)
							} else {
								this.$tip.success('提交失败!')
								uni.hideToast();
							}
						});
					
					})
				}

			},
			//选中隐患描述
			checkdetail(item) {
				this.imageValue = []
				this.$refs["showLeft"].close()
				this.resData.checkCriteriaId = item.checkCriteriaId
				this.resData.checkRectifyId = item.id
				this.resData.score = item.score
				this.resData.deadline = item.deadline
				this.resData.detailDesc = item.detailDesc
				this.resData.advise = item.rectify
				this.resData.placeDangerId = item.placeDangerId
				this.resData.dangerDesc = item.dangerDesc
				this.resData.flowStatus = item.flowStatus
				this.resData.checkTime = item.checkTime
				this.resData.status = item.status
				this.photoData = item.photoList
				this.apiditBatch()
			},
			//查询隐患描述列表侧边栏
			getrectifyList() {
				server.rectifyList({
					checkId: this.$root.$mp.query.checkId,
					checkCriteriaId: this.$root.$mp.query.id
				}).then(res => {
					console.log(res)
					this.$nextTick(function() {
						this.formData = res.data.result
						if (this.formData.length > 0) {
							if (this.formData.length == 1) {
								this.showSelectBtn = false
							}
							let item = {}
							item = this.formData[0]
							var that = this
							if (this.searchId) {
								this.formData.forEach(function(data) {
									if (data.id == that.searchId) {
										item = data

									}
								})
							}
							this.resData.checkCriteriaId = item.checkCriteriaId
							this.resData.checkRectifyId = item.id
							this.resData.score = item.score
							this.resData.deadline = item.deadline
							this.resData.detailDesc = item.detailDesc
							this.resData.advise = item.rectify
							this.resData.placeDangerId = item.placeDangerId
							this.resData.dangerDesc = item.dangerDesc 
							this.resData.flowStatus = item.flowStatus
							this.resData.checkTime = item.checkTime
							this.resData.status = item.status
							this.photoData = item.photoList
							this.apiditBatch()
						}
					});
				})
			},
			showDrawer() {
				this.$refs["showLeft"].open();
			},
			// 获取上传状态
			select(e) {
				var that = this
				console.log(this.imageValue)
				var tempFilePaths = []
				tempFilePaths = e.tempFilePaths
				tempFilePaths.forEach(function(item) {
					that.$http.upload(that.$config.apiUrl + '/sys/common/upload?biz=place', {
							filePath: item,
							name: 'file'
						})
						.then(res => {
							console.log(res)
							if(res.data.success){
								that.myFormData.push({
									path:item,
									url:res.data.message
								})
								that.$tip.success('上传成功！')
							}else{
								that.$tip.error('上传失败！')
							}
						})
						.catch(err => {
							that.$tip.error(err.data.message)
						});
				})
				console.log(that.myFormData)

			},
			//删除图片
			deLete(e) {
				console.log(e)
				if(this.myFormData.length>0){
					var index = -1
					this.myFormData.forEach((item,i)=>{
						if(e.tempFilePath == item.path){
							index=i
						}
					})
					if(index > -1){
						this.myFormData.splice(index,1)
					}
				}
				server.dangerphoto(e.tempFile.name).then(res => {
					this.$nextTick(function() {
						console.log(res)
					});

				})
			},
			switchChange(e) {
				let value = e.target.value
				let that = this
				this.$set(this.treatmentStatu, 'checked', value) // 将点击改变的状态赋给treatmentStatu.checked
				if (value && !this.havePromise) {
					uni.showModal({
						title: '提示',
						content: '设置为无隐患相片',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定')
								that.showphoto = false
								that.myFormData = []
								that.imageValue = []
							} else if (res.cancel) {
								that.showphoto = true
								that.$set(that.treatmentStatu, 'checked', false) // 手动修改switch的状态，视图会同步更新
								console.log('用户点击取消');
							}
						}
					});
				} else {
					that.showphoto = true
				}
			}
		},
	}
</script>

<style scoped lang="scss">
	.hearder {
		margin-bottom: 10px;
		background: white;
		padding: 10px;

		.dl {
			display: flex;
			justify-content: space-between;
			    align-items: center;
			margin-bottom: 10px;
			.width,.size{
				width: 75%;
			}
			.dt {
				padding: 4px 10px;
				font-size: 15px;
				border-radius: 30px;

			}

			.dt.size {
				color: #999;
			}

			.dt.green {
				border: 1px solid #52c41a;
				color: #52c41a;
			}

			.dt.red {
				border: 1px solid red;
				color: red;
			}
		}
	}

	.titlecontent {
		background: white;
	}

	.titlecontent {
		padding: 20px 15px;

		.h6 {
			float: left;
			width: 100%;
			box-sizing: border-box;
			margin-bottom: 10px;
			font-size: 18px;
			position: relative;
			padding-left: 10px;
			float: left;
		}

		.h6:before {
			width: 5px;
			content: '';
			height: 25px;
			background-color: #007aff;
			display: inline-block;
			border-radius: 7px;
			position: absolute;
			top: 0;
			left: 0;

		}

		.photo {
			margin-top: 10px;
		}

		.span {
			display: inline-block;
			font-size: 16px;
			margin-bottom: 10px;
		}

		.icon {
			float: right;
			color: #007aff;

		}

		.icon.xifen {
			font-size: 14px;
			color: #999;
		}

		.textarea {
			float: left;
			width: 100%;

			uni-textarea {
				padding: 10px;
				border: 1px solid #8799a3;
				border-radius: 10px;
				width: 100%;
				height: 120px;
				margin-bottom: 10px;
			}
			textarea{
				padding: 10px;
				border: 1px solid #8799a3;
				border-radius: 10px;
				width: 100%;
				height: 120px;
				margin-bottom: 10px;
			}

			.zhuyi {
				color: red;
				font-size: 15px;
				margin-bottom: 10px;
			}
		}
	}
	.box .formbox .ul{
		        display: unset;
		        float: left;
		        width: 100%;
		        margin-bottom: 5px;
		        border-bottom: 1px solid #ccc;
	}

	.box .formbox .h5 {
		margin-bottom: 20px;
	}
	.fontbotm{
		    float: left;
		    width: 100%;
			uni-switch,switch{
				width: 50px;
			}
	}
	.qinse .span{
		display: inline-block;
		    font-size: 14px;
		    font-weight: bold;
	}
</style>
